<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StellarDrift - 瓶子详情页原型</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Kaiti+SC:wght@400;700&display=swap');

        :root {
            --phone-width: 430px;
            --phone-height: 932px;
            --primary-bg: #0D1B2A;
            --secondary-bg: #1B263B;
            --lighter-bg: #415A77;
            --paper-bg: #FDFDF0;
            --accent-gold: #FFD700;
            --text-light: #E0E1DD;
            --text-dark: #778DA9;
            --text-on-paper: #333;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
            font-family: 'Noto Sans SC', sans-serif;
            overflow: hidden;
        }

        .phone-shell {
            width: var(--phone-width);
            height: var(--phone-height);
            background-color: #111;
            border-radius: 50px;
            padding: 12px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 0 10px #000;
            position: relative;
        }

        .screen {
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
            border-radius: 40px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Mockup Elements */
        .notch {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 140px;
            height: 35px;
            background-color: #111;
            border-radius: 0 0 20px 20px;
            z-index: 100;
        }
        .home-indicator {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 140px;
            height: 5px;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 5px;
            z-index: 100;
        }
        
        /* Main App Page */
        .bottle-detail-page {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            color: var(--text-light);
            animation: fade-in 0.5s ease-out;
        }

        @keyframes fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fade-out {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        .page-header {
            padding: 20px;
            padding-top: 50px; /* Space for notch */
            flex-shrink: 0;
            position: relative;
            text-align: center;
        }

        .back-button {
            position: absolute;
            left: 20px;
            top: 50px;
            font-size: 24px;
            cursor: pointer;
            color: var(--text-light);
            text-decoration: none;
        }

        .sender-info {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0 20px 20px 20px;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--lighter-bg);
            /* Placeholder for an image */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
        .nickname {
            font-size: 16px;
            font-weight: 500;
        }
        
        .content-container {
            flex: 1;
            margin: 0 20px;
            overflow-y: auto;
            perspective: 1000px;
        }
        /* Custom scrollbar */
        .content-container::-webkit-scrollbar { width: 4px; }
        .content-container::-webkit-scrollbar-track { background: transparent; }
        .content-container::-webkit-scrollbar-thumb { background: var(--text-dark); border-radius: 4px; }
        
        .letter {
            background-color: var(--paper-bg);
            color: var(--text-on-paper);
            padding: 30px;
            border-radius: 5px;
            font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', sans-serif;
            font-size: 18px;
            line-height: 2;
            min-height: 100%;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transform-origin: top center;
            animation: unfold 0.8s ease-out forwards;
        }

        @keyframes unfold {
            from {
                transform: rotateX(-90deg);
                opacity: 0;
            }
            to {
                transform: rotateX(0deg);
                opacity: 1;
            }
        }

        .action-bar {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 90px;
            background-color: rgba(27, 38, 59, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(119, 141, 169, 0.2);
            padding: 0 20px;
        }
        .action-group {
            display: none;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            gap: 20px;
        }
        .action-group.active {
            display: flex;
        }

        .action-button-large {
            flex: 1;
            padding: 15px;
            border-radius: 30px;
            border: none;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .action-button-large:active {
            transform: scale(0.96);
        }
        .action-button-large.open {
            background-color: var(--accent-gold);
            color: var(--primary-bg);
        }
        .action-button-large.throw-back {
            background-color: transparent;
            border: 1px solid var(--text-dark);
            color: var(--text-light);
        }
        
        .action-button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 28px;
            transition: transform 0.2s ease;
        }
        .action-button:active, .action-button.active {
            animation: jelly 0.5s;
        }
        
        .collect-button.active {
            color: var(--accent-gold);
        }

        @keyframes jelly {
            0%, 100% { transform: scale(1, 1); }
            25% { transform: scale(0.9, 1.1); }
            50% { transform: scale(1.1, 0.9); }
            75% { transform: scale(0.95, 1.05); }
        }

    </style>
</head>
<body>

    <div class="phone-shell">
        <div class="screen">
            <div class="notch"></div>
            
            <div class="bottle-detail-page">
                <header class="page-header">
                    <a href="HomePage.html" class="back-button" id="backButton">‹</a>
                </header>

                <div class="sender-info">
                    <div class="avatar">🧑‍🚀</div>
                    <div class="nickname">一位匿名的宇航员</div>
                </div>

                <main class="content-container">
                    <div class="letter">
                        你好，未来的过客。<br><br>
                        当你读到这封信时，我不知道自己身在何方，在做着什么。或许我正在为生活奔波，或许我已经实现了曾经的梦想。我只希望，那时的我没有忘记仰望星空的初心。<br><br>
                        这宇宙如此浩瀚，我们就像漂浮在其中的尘埃，偶然相遇，然后又各自远航。但正是这些短暂的交汇，定义了我们存在的坐标。<br><br>
                        愿你今晚也能看到美丽的星空，晚安。
                    </div>
                </main>

                <footer class="action-bar">
                    <!-- State 1: Pre-Open Actions -->
                    <div class="action-group active" id="preOpenActions">
                        <button class="action-button-large throw-back" id="throwBackBtn">扔回大海</button>
                        <button class="action-button-large open" id="openBtn">收藏瓶子</button>
                    </div>

                    <!-- State 2: Post-Open Actions -->
                    <div class="action-group" id="postOpenActions">
                        <button class="action-button" data-emoji="😊">😊</button>
                        <button class="action-button" data-emoji="🥲">🥲</button>
                        <button class="action-button" data-emoji="😮">😮</button>
                        
                    </div>
                </footer>
            </div>

            <div class="home-indicator"></div>
        </div>
    </div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const preOpenActions = document.getElementById('preOpenActions');
    const postOpenActions = document.getElementById('postOpenActions');
    const throwBackBtn = document.getElementById('throwBackBtn');
    const openBtn = document.getElementById('openBtn');
    const collectButton = document.getElementById('collectButton');

    // Handle "Open" click
    openBtn.addEventListener('click', () => {
        console.log('Bottle opened!');
        preOpenActions.classList.remove('active');
        postOpenActions.classList.add('active');
    });

    // Handle "Throw Back" click
    throwBackBtn.addEventListener('click', () => {
        console.log('Throwing bottle back to sea...');
        document.querySelector('.bottle-detail-page').style.animation = 'fade-out 0.3s ease-out forwards';
        setTimeout(() => {
            window.location.href = 'HomePage.html';
        }, 300);
    });

    // Handle post-open actions (emojis, collect)
    postOpenActions.addEventListener('click', (event) => {
        const button = event.target.closest('.action-button');
        if (!button) return;

        // Special toggle for collect button
        if (button.id === 'collectButton') {
            button.classList.toggle('active');
        }

        // Apply jelly animation to any clicked button
        button.style.animation = 'none';
        button.offsetHeight; /* trigger reflow */
        button.style.animation = 'jelly 0.5s';

        console.log(`Action: ${button.dataset.emoji}, State: ${button.classList.contains('active')}`);
    });
});
</script>

</body>
</html> 